<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-21 14:08:57
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-29 15:15:36
 * @FilePath: \客户端\app\src\views\Article\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEicle
-->
<template>
  <div class="content">
    <div class="main">
      <div class="like">
        <span class="likes">{{ likes }}</span>
        <svg
          t="1664017478969"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2541"
          width="32"
          height="32"
        >
          <path
            d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"
            p-id="2542"
            fill="#bfbfbf"
            :class="state ? 'like' : ''"
            @click="zan"
          ></path>
        </svg>
      </div>
      <div class="message">
        <svg
          t="1664110167035"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2591"
          width="32"
          height="32"
        >
          <path
            d="M639.892491 415.930119 383.935495 415.930119c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625L639.892491 351.94087c17.717453 0 31.994625 14.277171 31.994625 31.994625S657.609945 415.930119 639.892491 415.930119z"
            p-id="2592"
            fill="#bfbfbf"
          ></path>
          <path
            d="M579.17151 543.908618 383.935495 543.908618c-17.717453 0-31.994625-14.277171-31.994625-31.994625S366.390055 479.919368 383.935495 479.919368l195.236015 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S596.888964 543.908618 579.17151 543.908618z"
            p-id="2593"
            fill="#bfbfbf"
          ></path>
          <path
            d="M962.246934 447.924744c0-211.74937-200.912481-383.935495-447.924744-383.935495S66.225433 236.175374 66.225433 447.924744c0 116.453553 62.957164 226.026541 172.874181 300.680665 14.621199 9.976818 34.574836 6.192508 44.379641-8.428691 9.976818-14.621199 6.192508-34.574836-8.428691-44.379641-92.027549-62.441122-144.835881-152.74853-144.835881-247.700319 0-176.486477 172.186125-319.946246 383.935495-319.946246s383.935495 143.631782 383.935495 319.946246-172.186125 319.946246-383.935495 319.946246c-2.064169 0-3.612296 0.688056-5.504452 1.204099-15.137242-2.752226-30.446498 5.160423-35.778935 20.125651-6.192508 17.373425-46.44381 46.615824-94.091718 73.794053 17.373425-58.140769 9.116748-70.697799 3.440282-78.954477-6.70855-9.976818-17.889467-15.997312-29.930455-15.997312-17.717453 0-31.994625 14.277171-31.994625 31.994625 0 5.84848 1.548127 11.180917 4.300353 15.997312-3.268268 18.233496-17.201411 60.892995-33.026709 99.768184-4.988409 12.040988-2.064169 25.974131 7.396607 35.090879 6.020494 5.84848 14.105157 8.944734 22.18982 8.944734 4.300353 0 8.77272-0.860071 13.073072-2.752226 36.466991-16.341341 147.588107-69.149672 187.667395-125.570301C765.290778 828.075928 962.246934 657.609945 962.246934 447.924744z"
            p-id="2594"
            fill="#bfbfbf"
          ></path>
        </svg>
      </div>
      <div class="share">
        <svg
          t="1664110330534"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4996"
          width="32"
          height="32"
        >
          <path
            d="M763.84 896c-47.128 0-85.333-38.205-85.333-85.333s38.205-85.333 85.333-85.333c47.128 0 85.333 38.205 85.333 85.333 0 47.128-38.205 85.333-85.333 85.333M329.92 558.848c-14.895 26.231-42.641 43.638-74.453 43.638-47.128 0-85.333-38.205-85.333-85.333 0-16.097 4.457-31.152 12.204-44 14.935-24.769 42.098-41.333 73.13-41.333 47.128 0 85.333 38.205 85.333 85.333 0 15.317-4.035 29.691-11.101 42.117M763.84 128c47.128 0 85.333 38.205 85.333 85.333s-38.205 85.333-85.333 85.333c-47.128 0-85.333-38.205-85.333-85.333 0-47.128 38.205-85.333 85.333-85.333M763.84 682.667c-0.021 0-0.047 0-0.072 0-39.16 0-74.203 17.626-97.628 45.378l-289.885-167.063c4.932-13.101 7.787-28.245 7.787-44.055 0-0.105 0-0.209 0-0.314 0-0.072 0-0.177 0-0.281 0-15.81-2.855-30.953-8.077-44.942l295.544-169.566c23.265 24.363 56.001 39.509 92.275 39.509 0.020 0 0.039 0 0.059 0 70.689 0 127.997-57.308 127.997-128 0-70.692-57.308-128-128-128-70.692 0-128 57.308-128 128 0 18.965 4.224 36.907 11.627 53.099l-292.288 168.747c-23.653-28.833-59.285-47.084-99.18-47.084-70.692 0-128 57.308-128 128 0 0.188 0 0.376 0.001 0.564-0.001 0.123-0.001 0.304-0.001 0.484 0 70.692 57.308 128 128 128 39.895 0 75.526-18.251 99.001-46.86l289.373 166.752c-5.397 13.568-8.529 29.29-8.533 45.743 0 70.582 57.308 127.889 128 127.889 70.692 0 128-57.308 128-128 0-70.692-57.308-128-128-128z"
            fill="#bfbfbf"
            p-id="4997"
          ></path>
        </svg>
      </div>
      <div class="left">
        <el-card class="articleLists">
          <div class="titleBox">
            <div>
              <h1>{{ title }}</h1>
              <span>发布于{{ date }}· 阅读量{{ readers }}</span>
            </div>
            <img :src="img" alt="" style="width: 98%" />
          </div>
          <v-md-preview :text="text"></v-md-preview>
        </el-card>
        <p style="text-align: center; margin: 10px">评论</p>
        <el-card class="comment">
          <el-input
            v-model="textarea"
            :rows="5"
            type="textarea"
            @focus="comment"
            placeholder="请输入评论内容"
          />
        </el-card>
      </div>

      <div class="text">
        <div class="text-one">
          <b>推荐阅读</b>
          <div v-for="(v, i) in data" :key="i">
            <p>{{ v.title }} · {{ getDate(v.date) }}</p>
          </div>
        </div>
      </div>
    </div>

    <el-dialog title="提示" v-model="visible" width="30%">
      <div>
        <p>
          用户名:<el-input
            v-model="username"
            placeholder="Please input"
            style="width: 200px; padding: 10px"
          />
        </p>
        <p>
          密码:<el-input
            v-model="password"
            placeholder="Please input"
            style="width: 200px; padding: 10px"
          />
        </p>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span> -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="this.visible = false">取消</el-button>
          <el-button type="primary" @click="sure">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {
  asyncArticleLists,
  asyncTagLists,
  asyncZan,
  asyncLogin,
} from "../../api/article";

import { Star, HelpFilled, Share, Flag } from "@element-plus/icons-vue";
import RightBox from "../../components/RightBox.vue";
import { formatTime } from "../../utils/moment";

export default {
  components: {
    formatTime,
    RightBox,
    Star,
    HelpFilled,
    Share,
    Star,
  },

  data() {
    return {
      data: [],
      tagList: [],
      classLists: [],
      text: "",
      img: "",
      title: "",
      readers: "",
      date: "",
      likes: 0,
      state: false,
      id: "",
      textarea: "",
      token: localStorage.getItem("username") || "",
      visible: false,
      username: "",
      password: "",
    };
  },
  created() {
    this.init();
    console.log(this.visible);
  },

  methods: {
    init() {
      this.getArticleLists();
      this.getTagLists();
    },
    async getArticleLists() {
      const res = await asyncArticleLists("/articleImg");
      this.data = res.data.list.filter(
        (v) => v.id == this.$route.query.detailId
      );
      this.data.map((item) => {
        this.text = item.content;
        this.img = item.img;
        this.title = item.title;
        this.date = item.date;
        this.readers = item.readers;
        this.likes = item.likes;
        this.id = item.id;
      });
    },
    // 标签
    async getTagLists() {
      const res = await asyncTagLists("/tagLists");
      this.tagList = res.data.list;
    },

    // 点赞
    async zan() {
      this.state = !this.state;
      const res = await asyncZan("/zan", {
        likes: this.likes,
        state: this.state,
        id: this.$route.query.detailId,
      });
      console.log(res);
      this.getArticleLists();
    },
    comment() {
      console.log(this.token);
      if (!this.token) {
        this.visible = true;
      } else {
        this.visible = false;
      }
    },
    async sure() {
      const res = await asyncLogin("/login", {
        username: this.username,
        password: this.password,
      });
      if (res.data.code === 200) {
        localStorage.setItem("username", res.data.username);
        // this.visible=false;
      } else {
        alert("密码错误");
      }
      this.visible = false;

      console.log(this.visible);
    },
  },
  computed: {
    getDate() {
      return function (val) {
        var timestamp = new Date(val).getTime();
        var minute = 1000 * 60;
        var hour = minute * 60;
        var day = hour * 24;
        var halfamonth = day * 15;
        var month = day * 30;
        var year = day * 365;
        var now = new Date().getTime();
        var diffValue = now - timestamp;
        var result;
        if (diffValue < 0) {
          return;
        }
        var yearC = diffValue / year;
        var monthC = diffValue / month;
        var weekC = diffValue / (7 * day);
        var dayC = diffValue / day;
        var hourC = diffValue / hour;
        var minC = diffValue / minute;
        if (yearC >= 1) {
          result = "" + parseInt(yearC) + "年前";
        } else if (monthC >= 1) {
          result = "" + parseInt(monthC) + "月前";
        } else if (weekC >= 1) {
          result = "" + parseInt(weekC) + "周前";
        } else if (dayC >= 1) {
          result = "" + parseInt(dayC) + "天前";
        } else if (hourC >= 1) {
          result = "" + parseInt(hourC) + "小时前";
        } else if (minC >= 1) {
          result = "" + parseInt(minC) + "分钟前";
        } else result = "刚刚";
        return result;
      };
    },
  },
};
</script>
<style lang="less" scoped>
.spanItem:hover {
  color: red;
}
.like {
  fill: red;
}

@media (min-width: 1200px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;

    .main {
      width: 80%;
      margin-left: auto;
      margin-right: auto;

      .like {
        position: relative;
        .likes {
          position: absolute;
          top: -30px;
          right: 0px;
        }
        position: fixed;
        left: 50px;
        top: 240px;
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 100%;
        line-height: 70px;
        text-align: center;
      }
      .message {
        position: fixed;
        left: 50px;
        top: 320px;
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 100%;
        line-height: 70px;
        text-align: center;
      }
      .share {
        position: fixed;
        left: 50px;
        top: 400px;
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 100%;
        line-height: 70px;
        text-align: center;
      }
      .left {
        width: 50%;
        height: 100%;
        margin-left: 130px;
      }
      .articleLists {
        width: 100%;
        margin-left: 10px;
        margin-top: 20px;

        .titleBox {
          display: flex;
          flex-direction: column;
          align-items: center;

          div {
            padding: 10px;
          }
        }
      }
      .comment {
        width: 100%;
        margin-left: 10px;
        margin-top: 20px;
      }
      // 右侧
      .text {
        width: 25%;
        margin: 20px;
        position: fixed;
        top: 70px;
        right: 150px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 12px;
        .text-one {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

@media (min-width: 870px) and (max-width: 1200px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 70%;
      margin-left: auto;
      margin-right: auto;

      .like {
        display: none;
        position: relative;
        .likes {
          position: absolute;
          top: -30px;
          right: 0px;
        }
        position: fixed;
        left: 50px;
        top: 240px;
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 100%;
        line-height: 70px;
        text-align: center;
      }
      .message {
        display: none;
        position: fixed;
        left: 50px;
        top: 320px;
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 100%;
        line-height: 70px;
        text-align: center;
      }
      .share {
        display: none;
        position: fixed;
        left: 50px;
        top: 400px;
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 100%;
        line-height: 70px;
        text-align: center;
      }
      .left {
        width: 55%;
        height: 100%;
        margin-left: 20px;
        .play {
          width: 100%;
          height: 80%;
          // margin: 10px;
          border: 1px solid #ccc;
          background: #fff;
          .play-box {
            width: 97%;
            height: 95%;
            padding: 5px 5px 5px 5px;
            border: 1px solid #ccc;
          }
        }

        .articleLists {
          width: 100%;
          // margin-left: 0px;
          margin-top: 20px;
          span {
            font-size: 10px;
          }
          .spanItem {
            margin: 10px;
            font-size: 10px;
          }

          .article {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            flex-shrink: 0;

            .dl {
              width: 80%;
              display: flex;
              flex-direction: column;
              padding: 10px;

              b {
                padding: 5px;
              }
              img {
                width: 40%;
                // height: 100%;
                padding: 5px;
              }

              dt {
                display: flex;
                // align-items: flex-start;
                // flex-wrap: wrap;
                // position: relative;
                span {
                  padding: 10px;
                }
                p {
                  display: flex;
                  flex-direction: column;

                  .icons {
                    // bottom: 10px;
                    // position: absolute;
                    // left: 250px;
                    margin-top: 40px;
                  }
                }
              }
            }
          }
        }
      }
      .text {
        width: 25%;
        margin: 20px;
        position: fixed;
        top: 70px;
        right: 150px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 12px;
        .text-one {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
        .text-two {
          display: flex;
          flex-direction: column;
          background: #fff;
          justify-content: space-between;
          align-items: flex-start;
          margin-top: 20px;
          b {
            width: 90%;
            font-weight: 20px;
            margin: 15px;
          }
          p {
            padding: 10px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

@media (min-width: 20px) and (max-width: 870px) {
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .main {
      width: 100%;
      margin-left: auto;
      margin-right: auto;

      .like {
        position: relative;
        display: none;
        .likes {
          position: absolute;
          top: -30px;
          right: 0px;
        }
        position: fixed;
        left: 50px;
        top: 240px;
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 100%;
        line-height: 70px;
        text-align: center;
      }
      .message {
        display: none;
        position: fixed;
        left: 50px;
        top: 320px;
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 100%;
        line-height: 70px;
        text-align: center;
      }
      .share {
        display: none;
        position: fixed;
        left: 50px;
        top: 400px;
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 100%;
        line-height: 70px;
        text-align: center;
      }
      .left {
        width: 100%;
        height: 100%;

        .play {
          width: 98%;
          height: 27%;
          margin: 10px;
          border: 1px solid #ccc;

          .play-box {
            width: 98%;
            height: 93%;
            margin: 10px auto;
            border: 1px solid #ccc;
            img {
              height: 100%;
              // width: 100%;
            }
          }
        }

        .articleLists {
          width: 98%;
          margin-left: 10px;
          margin-top: 20px;
          span {
            // font-size: 10px;
          }
          .spanItem {
            margin: 10px;
            // font-size: 10px;
          }

          .article {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            flex-shrink: 0;

            .dl {
              width: 80%;
              display: flex;
              flex-direction: column;
              padding: 10px;

              b {
                padding: 5px;
              }
              img {
                width: 40%;
                padding: 5px;
              }

              dt {
                display: flex;
                // align-items: flex-start;
                flex-wrap: wrap;
                // position: relative;
                span {
                  padding: 10px;
                }
                p {
                  display: flex;
                  flex-direction: column;

                  .icons {
                    // bottom: 10px;
                    // position: absolute;
                    // left: 250px;
                    // margin-top: 40px;
                  }
                }
              }
            }
          }
        }
      }

      .text {
        display: none;
        width: 30%;
        margin: 20px;
        height: 100px;
        position: fixed;
        top: 60px;
        right: 90px;
        border: 1px solid #ccc;

        .text-one {
          width: 100%;
          height: auto;
          border: 1px solid #ccc;
          margin-top: 20px;
        }
        .text-two {
          width: 100%;
          height: auto;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
</style>

